<div class="sw-toc-item" is-active-menu>
    <div class="inner">
        <div class="btn-group btn-group-sm" role="group" ng-if="$ctrl.item.subMenus.length>0">
            <a ng-repeat="m in $ctrl.item.subMenus" href="{{m.href}}" class="btn btn-light">
                <span class="{{m.icon}}"></span>
            </a>
            <a href="#" class="btn btn-light" data-toggle="collapse" data-target="#{{$ctrl.item.title}}" role="button" aria-expanded="false" aria-controls="{{$ctrl.item.title}}">
                <span class="fas fa-chevron-down"></span>
            </a>
        </div>
    </div>
    <div class="sw-toc-link mt-1 mb-1" data-toggle="collapse" data-target="#{{$ctrl.item.title}}" role="button" aria-expanded="false" aria-controls="{{$ctrl.item.title}}">
        <i class="{{$ctrl.item.icon}} mi-lg mi-fw"></i>
        <a href="{{$ctrl.item.href}}" class="text" ng-bind-html="$ctrl.translate($ctrl.item.title,true)"></a>
    </div>
    <ul ng-if="$ctrl.item.subMenus.length>0" id="{{$ctrl.item.title}}" class="collapse list-unstyled" role="tabpanel" data-parent="#sw-docs-nav">
        <li ng-repeat="m in $ctrl.item.subMenus">
            <a href="{{m.href}}" class="sw-toc-sub-link mb-1">
                <i class="{{m.icon}} mi-fw"></i>
                <span class="text" ng-bind="$ctrl.translate(m.title)"></span>
            </a>
        </li>
    </ul>
</div>
